<template>
	<view class="videoitem">
		<view class="video">
			<video :src="video.videoSourceId">
			</video>
			<view class="videoname">{{video.title}}</view>
		</view>
	</view>
</template>

<script setup>
	defineProps({
		video: {}
	})
</script>

<style lang="scss" scoped>
	.videoitem {
		width: 100%;
		height: 100%;
		padding: 50rpx 30rpx;

		.video {
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
			box-shadow: 0 0 10rpx #000000;
			overflow: hidden;

			video {
				width: 100%;
				height: 300rpx;
			}

			.videoname {
				width: 100%;
				height: 60rpx;
				padding: 0 20rpx;
				line-height: 60rpx;
				text-align: center;
				font-size: 30rpx;
				color: #000000;
				background-color: #FFFFFF;
				border-radius: 0 0 20rpx 20rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
</style>